<script>
	export default {
		onLoad(options) {
			if (options.item) {
				this.item = JSON.parse(options.item)
				
				if(this.item){
					this.formData.order_id = this.item.id
					if(this.item.comment){
						this.formData.content = this.item.comment.comment
						this.formData.evaluate = this.item.comment.score
						if(this.item.comment.images){
							this.formData.images = this.item.comment.images.split(',')
						}
					}
				}
				
			}
			if(options.is_adimn){
				this.is_adimn=options.is_adimn
			}
		},
		data() {
			return {
				is_adimn:0,
				statusText: {
					1: "正常",
					2: "故障",
					3: "被占用 ",
					4: "停用",
				},
				// 表单数据
				formData: {
					content: '', // 评论内容
					evaluate: 5, // 评分，默认5星
					images: [], // 上传的图片
					order_id: '', // 订单ID
				},
				// 订单信息
				item: {

				}
			}
		},
		methods: {
			//
			// 处理评分
			handleScore(evaluate) {
				console.log(evaluate)
				this.formData.evaluate = evaluate
			},

			// 上传图片
			async uploadImage() {
				try {
					const res = await uni.chooseImage({
						count: 4 - this.formData.images.length, // 最多4张
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					})

					uni.showLoading({
						title: '上传中...'
					})

					try {
						const uploadTasks = res.tempFilePaths.map(path => {
							return new Promise((resolve, reject) => {
								uni.uploadFile({
									url: 'https://app.yinuoxinnengyuan.cn/index.php/api/index/uploads',
									filePath: path,
									name: 'file',
									success: (uploadRes) => {
										const data = JSON.parse(uploadRes.data)
										resolve(data.data.pic_path)
									},
									fail: reject
								})
							})
						})

						const uploadedUrls = await Promise.all(uploadTasks)
						this.formData.images = [...this.formData.images, ...uploadedUrls].slice(0, 4)

						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					} catch (error) {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
						console.error('上传失败:', error)
					} finally {
						uni.hideLoading()
					}
				} catch (error) {
					console.error('选择图片失败:', error)
				}
			},

			// 删除图片
			deleteImage(index) {
				this.formData.images.splice(index, 1)
			},

			// 提交评论
			async submitComment() {
				if (!this.formData.content.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '提交中...'
				})

				try {
					const res = await this.http("post", "/api/order/evaluate", this.formData)
					this.toast(res.message)
					if (res.code == 200) {
						uni.navigateBack()
					}
				} catch (error) {
					uni.showToast({
						title: '评论失败',
						icon: 'error'
					})
					console.error('评论失败:', error)
				} finally {
					uni.hideLoading()
				}
			}
		}
	}
</script>

<template>
	<view class="h-full flex flex-col" style="align-items: stretch;">
		<div class="p-30 mb-20" style="padding-top: 0;">
			<view class="shadow  rounded-20 item">
				<div class="flex p-20" style="padding-bottom: 10rpx;" v-if="item.station">
					<div class="w-full">
						<div class="between w-full">
							<div class="flex">
								<image :src="item.station.pic" mode="aspectFill" class="w-50 h-50 rounded-full">
								</image>
								<div class="fz40 ml-20">{{item.station.name}}</div>
							</div>
						</div>
						<div class="fz24 text-gray-600 mt-10 mb-10" style="margin-left: 70rpx;">
							{{item.station.address}}
						</div>
					</div>
				</div>

				<div class="flex-col mb-20" v-if="item.device">
					<div class="between  overflow-hidden">

						<div class="text-center center text-white fz24 pt-24 pb-24 w-40" style="align-self: stretch;"
							:class="{'bg-green':item.device.status==1,'bg-yellow':item.device.status==2,'bg-orange':item.device.status==3,'bg-red':item.device.status==4}">
							电桩{{statusText[item.device.status]}}
						</div>


						<div class="rounded-full w-100 h-100 flex-shirnk-0 bg-green center overflow-hidden">
							<image
								src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
								class="w-full h-full" mode="aspectFill"></image>
						</div>
						<div class="info fz24 text-gray-900" style="width: 450rpx;word-break: break-all;">
							<div class="fz28 text-black">{{item.device.name}}({{item.device.brand}})</div>
							<div class="between mt-10">
								<div class="">编号:{{item.device.sn}}</div>
								<div class="">功率:{{item.device.rate}}kw</div>
							</div>
							<div class="mt-5 mb-5">营业时间:{{item.device.start_time}}-{{item.device.end_time}}</div>
							<div class="between">
								<div class="">停车费:{{item.park_price}}元/小时</div>
								<!-- <div class="text-green-2" style="display: none;">可约停车位</div> -->
							</div>
						</div>
						<div class="status  text-white fz28 font-bold mt-15 mr-15 p-5 rounded-15 w-40 h-40 center flex-shirnk-0"
							style="align-self: flex-start;"
							:class="{'bg-orange':item.device.speed=='慢','bg-red':item.device.speed=='快'}">
							{{item.device.speed}}
						</div>
					</div>
				</div>

				<div class="mt-20" style="height: 1rpx;width: 100%;background-color: #D8D8D8;"></div>


				<div class="p-30" v-if="item.type==1">
					<div class="fz28 mb-10">充电开始时间：{{item.start_time}}</div>
					<div class="fz28 mb-10">充电结束时间：{{item.end_time}}</div>
					<div class="between mb-10">
						<div class="fz28">充电时长：{{item.charging_duration}}分</div>
						<div class="fz28">平均时段 <text style="color: #FF0000;">{{item.du||0}}</text> 元/度</div>
					</div>
					<div class="between mb-10 fz28">
						<div v-if="item.car">充电车辆：{{item.car.name}}</div>
						<div>充电量：{{item.charging_capacity}}度</div>
					</div>
					<div class="between mb-10 fz28">
						<div>电费：{{item.electric_price}}元</div>
						<div>服务费：{{item.service_price}}元</div>
					</div>
					<div class="between mb-10 fz28">
						<div>停车费：{{item.park_price}}元</div>
						<!-- <div>剩余免费停车时长：15分钟</div> -->
					</div>

					<div class="between mb-10">
						<div class="fz28">已支付： <text style="color: #FF0000;">{{item.paid_price}}元</text></div>
					</div>
					<!-- <div class="fz28 text-gray-600">停车费计费标准:6元/时(充电中+15分钟免费）</div> -->
				</div>
				
				<div class="p-30" v-if="item.type==2">
					<div class="fz28 mb-10">停车开始时间：{{item.start_time}}</div>
					<div class="fz28 mb-10">停车结束时间：{{item.end_time}}</div>
					<div class="between mb-10">
						<div class="fz28">停车时长：{{item.use_time2}} 分钟</div>
					</div>
					<div class="between mb-10 fz28">
						<div v-if="item.car">停车车辆：{{item.car.name}}</div>
						<div v-if="item.car">车牌号：{{item.car.car_number}}</div>
					</div>
					<div class="between mb-10 fz28">
						<div>停车费：{{item.park_price}}元</div>
						<!-- <div>剩余免费停车时长：15分钟</div> -->
					</div>
				
					<div class="between mb-10">
						<div class="fz28">已支付： <text style="color: #FF0000;">{{item.paid_price}}元</text></div>
					</div>
					<!-- <div class="fz28 text-gray-600">停车费计费标准:6元/时(充电中+15分钟免费）</div> -->
				</div>
				




			</view>

			<view class="shadow  rounded-20 item mt-20 p-20">
				<div class="font-bold">*描述内容</div>
				<textarea class="mt-20" style="height: 250rpx;" placeholder="请输入描述内容" v-model="formData.content"
					maxlength="60"></textarea>
				<div class="flex text-gray-600" style="justify-content: flex-end;">
					{{formData.content.length}}/60
				</div>
			</view>

			<view class="shadow  rounded-20 item mt-20 p-20">
				<div class="flex">
					<div class="font-bold">*打分</div>
					<div class="flex ml-20">
						<image v-for="i in 5" :key="i"
							:src="i <= formData.evaluate ? '/static/icon/star.png' : '/static/icon/star2.png'"
							mode="widthFix" class="w-40 ml-20" @click="handleScore(i)"></image>
					</div>
				</div>
			</view>

			<view class="shadow  rounded-20 item mt-20 p-20">
				<div class="font-bold">上传照片</div>
				<div class="flex mt-20">
					<div v-if="formData.images.length < 4" class="w-120 h-120 rounded-15 bg-gray-300 center"
						@click="uploadImage">
						<image src="/static/icon/add.png" mode="widthFix" class="w-50"></image>
					</div>
					<div v-for="(img, index) in formData.images" :key="index"
						class="w-120 h-120 rounded-15 bg-gray-300 center ml-20 relative" style="position: relative;">
						<image src="/static/icon/del.png" class="w-30 h-30" mode="widthFix" @click="deleteImage(index)"
							style="position:absolute;right: 0;top:0;z-index: 9;"></image>
						<image :src="img" mode="aspectFill" class="w-full h-full"></image>
					</div>
				</div>
			</view>

			<div class="h-50"></div>
			<div v-if="item.status==5&&is_adimn==0" class="bg-orange text-white center fz45 mt-20 rounded-15 shadow pt-10 pb-10 mb-50"
				@click="submitComment">提交评论</div>

		</div>


	</view>
</template>


<style>
	.scan {
		position: fixed;
		z-index: 99;
		width: 160rpx;
		bottom: 5%;
		right: 1%;
	}

	.item {
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3) !important;
	}

	.active {
		color: #3662EC;
		font-weight: bold;
	}

	page {
		height: 100%;
	}
</style>